<template>
  <div class="container deal-order my-deal">
    <uni-nav-bar @clickLeft="$ui.back()" dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF"
      left-icon="left" status-bar title="我的交易" />
    <div class="my-deal-header">
      <div class="deal-type" @click="changeHead(1)" :style="type == 1 ? 'color:#ffffff' : ''">出售</div>
      <div class="deal-type" @click="changeHead(2)" :style="type == 2 ? 'color:#ffffff' : ''">购买</div>
      <div class="deal-bg" :class="headerClass"></div>
    </div>
    <view class="u-flex u-ju-center" :style="{marginTop: statusBarHeight + 'px'}">
      <u-tabs :list="tabList" @click="changeTab"></u-tabs>
    </view>
    <div class="order-item" v-for="(item,index) in list" :key="index" @click="goDetail(item)">
      <div class="flex-between-center item-top">
        <div class="item-name van-ellipsis">{{item.user}}</div>
        <image :src="item.level_logo" class="item-level" mode=""></image>
      </div>
      <div class="item-number">数量：<span class="number-width font-family-din van-ellipsis">{{item.num}}</span>
        <span class="margin-left">YKB</span>
      </div>
      <div class="item-number">单价：<span class="number-width fDnt-family-din van-ellipsis">{{item.price}}</span>
        <span class="margin-left">CYN</span>
      </div>
      <div class="item-number">总价：<span
          class="all-price number-width font-family-din van-ellipsis">{{item.total_price}}</span> <span
          class="margin-left">CYN</span></div>
      <div class="item-pay-img">
        <image :src="item == 1 ? alipayImg : item == 2 ? wechatImg : item == 3 ? bankImg : item == 4 ? usdtImg : ''"
          class="pay-img" v-for="(item,index) in item.paymant" :key="index"></image>
      </div>
      <div class="flex-between-center item-time" v-if="item.status == 1 || item.status == 2">
        <image src="@/assets/deal/pz-time.png" mode="" class="time-img"></image>
        <span>剩余时间 </span>
        <u-count-down :time="item.time" v-if="item.time > 0" format="HH:mm:ss" @finish="onFinish" />
        <u-count-down :time="item.time" v-else format="HH:mm:ss" :auto-start="false" />
      </div>
      <div v-if="type == 2">
        <u-button class="van-btn-no van-btn-loading-pp" v-if="item.status == 0">匹配中…</u-button>
        <u-button v-if="item.status == 1">上传支付凭证</u-button>
        <u-button class="van-btn-no van-btn-other" v-if="item.status == 2">等待对方确认…</u-button>
        <u-button class="van-btn-no van-btn-other" v-if="item.status == 3">订单已完成</u-button>
        <u-button class="van-btn-no van-btn-appeal" v-if="item.status == 4">申诉中…</u-button>
        <u-button class="van-btn-no van-btn-appeal-success" v-if="item.status == 5">申诉成功</u-button>
        <u-button class="van-btn-no van-btn-appeal" v-if="item.status == 6">申诉失败</u-button>
        <u-button class="van-btn-no van-btn-loading-pp" v-if="item.status == 7">已取消</u-button>
      </div>
      <div v-else>
        <u-button class="van-btn-no van-btn-loading-pp" v-if="item.status == 0">匹配中…</u-button>
        <u-button class="van-btn-no vvan-btn-other" v-if="item.status == 1">等待上传凭证…</u-button>
        <u-button v-if="item.status == 2">确认支付凭证</u-button>
        <u-button class="van-btn-no van-btn-other" v-if="item.status == 3">订单已完成</u-button>
        <u-button class="van-btn-no van-btn-appeal" v-if="item.status == 4">申诉中…</u-button>
        <u-button class="van-btn-no van-btn-appeal-success" v-if="item.status == 5">申诉成功</u-button>
        <u-button class="van-btn-no van-btn-appeal" v-if="item.status == 6">申诉失败</u-button>
        <u-button class="van-btn-no van-btn-loading-pp" v-if="item.status == 7">已取消</u-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getMydealList
  } from '@/api/deal/index.js'
  export default {
    data() {
      return {
        alipayImg: require('@/assets/deal/alipay.png'),
        wechatImg: require('@/assets/deal/wechat.png'),
        bankImg: require('@/assets/deal/bank.png'),
        usdtImg: require('@/assets/deal/usdt.png'),
        type: 1,
        tabIndex: 0,
        headerClass: '',
        tabList: [{
          id: 0,
          name: '进行中'
        }, {
          id: 1,
          name: '已完成'
        }],
        page: 1,
        list: [],
        loading: false,
        finished: false,
        tabClass: '',
        statusBarHeight: 0
      }
    },
    created() {
      this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'] + 30;
      this.getInfo()
    },
    methods: {
      backClick() {
        uni.navigateBack()
      },
      getInfo() {
        let vm = this
        let status = 3
        if (vm.tabIndex == 0) {
          status = 2
        } else {
          status = 3
        }
        getMydealList({
          page: vm.page,
          type: vm.type,
          status: status
        }).then(res => {
          vm.loading = true
          if (res.code == 1) {
            vm.getInfoBack(res)
          }
        })
      },
      getInfoBack(res) {
        let vm = this
        let list = res.data.list
        for (let i in list) {
          list[i].time = list[i].time * 1000
        }
        vm.list = [...vm.list, ...list]
        if (vm.page < res.data.pages) {
          vm.page++;
        } else {
          vm.finished = true
        }
      },
      goDetail(item) {
        let vm = this
        if (item.status == 1 || item.status == 2) {
          // vm.$cookie.set('headType', vm.type)
          // vm.$cookie.set('tabIndex', vm.tabIndex)
          this.$ui.push('/pages/deal/deal_info?id=' + item.id)
        } else {

        }
      },
      changeTab(val) {
        if (val.name == '进行中') {
          this.tabIndex = 0
        } else {
          this.tabIndex = 1
        }
        this.onRefresh()
      },
      onFinish() {

      },
      onRefresh() {
        this.page = 1
        this.list = []
        this.finished = false
        this.getInfo()
      },
      changeHead(index) {
        this.type = index
        if (index == 1) {
          this.headerClass = 'type-active-1'
        } else {
          this.headerClass = 'type-active-2'
        }
        this.onRefresh()
      }
    },
  }
</script>
<style>
  page {
    background-color: #fff;
  }
</style>
<style lang="less" scoped>
  .my-deal {
    background: #F2F2F2;
  }
</style>

<style lang="less">
  .my-deal {
    .van-tabs__line {
      background: #2680EB;
    }

    .van-tab__text {
      color: #949494;
    }

    .van-tab,
    .van-tabs__wrap {
      background: #ffffff;
    }

    .van-tab--active {
      .van-tab__text {
        color: #2680EB;
      }
    }

    .van-tabs__wrap::after {
      border: none;
    }

    .van-sticky--fixed {
      top: 1.7rem;
    }
  }

  .pay-img {
    width: 30rpx;
    height: 30rpx;
  }
</style>
